<template>
  <div>
    <h1>待办事项</h1>
    <topvue @add="gettexts"></topvue>
    <ul>
      <li v-for="(item, index) in list" @click="changecolor(index)" :class="item.flag?'color':''" v-show="btnflag=='all'?true:btnflag=='finished'?item.flag:!item.flag">{{ item.name }}</li>
    </ul>
    <bottomvue @change="changes"></bottomvue>
  </div>
</template>

<script>
import topvue from './top.vue'
import bottomvue from './bottom.vue'
export default {
  components: {
    topvue,
    bottomvue
  },
  data() {
    return {
      list: [{
        id: 1,
        name: '吃饭',
        flag: false
      }, {
        id: 2,
        name: '睡觉',
        flag: false
      }, {
        id: 3,
        name: '打豆豆',
        flag: false
      }],
      btnflag: 'all'
    }
  },
  methods: {
    gettexts(val) {
      console.log(val);
      this.list.push({
        id: this.list.length + 1,
        name: val,
        flag: false
      })
    },
    changecolor(index) {
      this.list[index].flag = !this.list[index].flag;
    },
    changes(val){
      this.btnflag=val;
    }
  }
}
</script>

<style scoped>
h1 {
  text-align: center;
}
.color{
  color: red;
}
</style>
